/**
 * Created by helin3 on 2017/11/17.
 */
define([
  './themes/lang/' + window.YUFP_SYS_CONFIG.language + '/pages/example/native/form.js'
], function (require, exports) {
  // page加载完成后调用ready方法
  exports.ready = function (hashCode, data, cite) {
    // 创建virtual model
    var vm = yufp.custom.vue({
      el: '#fx_form',
      // 以m_开头的属性为UI数据不作为业务数据，否则为业务数据
      data: function () {
        /**
                 *  可以扩展验证库未提供的验证方法
                 *
                 * **/
        yufp.validator.checkAge = function (rule, value, callback) {
          if (!value) {
            return callback(new Error(this.$t('form.nlbnwk')));
          }
          setTimeout(function () {
            if (!Number.isInteger(value)) {
              callback(new Error(this.$t('form.qsrszz')));
            } else {
              if (value < 18) {
                callback(new Error(this.$t('form.bxnms')));
              } else {
                callback();
              }
            }
          }, 200);
        };
        return {
          options: [{
            value: this.$t('form.xx'),
            label: this.$t('form.hjg')
          }, {
            value: this.$t('form.xx'),
            label: this.$t('form.spn')
          }, {
            value: this.$t('form.xx'),
            label: this.$t('form.kzj')
          }, {
            value: this.$t('form.xx'),
            label: this.$t('form.lxm')
          }, {
            value: this.$t('form.xx'),
            label: this.$t('form.bjky')
          }],
          value: '',
          checkbox: '',
          radiobox: '',
          dataUrl: 'trade/example/select',
          ruleForm: {
            selected: [],
            cascader: [],
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            options1: [{'key': '1', 'value': this.$t('form.cszj')}, {'key': '2', 'value': this.$t('form.cszj')}],
            options2: [{
              value: 'zhinan',
              label: this.$t('form.zn'),
              disabled: true,
              children: [{
                value: 'shejiyuanze',
                label: this.$t('form.sjyz'),
                children: [{
                  value: 'yizhi',
                  label: this.$t('form.yz')
                }, {
                  value: 'fankui',
                  label: this.$t('form.fk')
                }, {
                  value: 'xiaolv',
                  label: this.$t('form.xl')
                }, {
                  value: 'kekong',
                  label: this.$t('form.kk')
                }]
              }, {
                value: 'daohang',
                label: this.$t('form.dh'),
                children: [{
                  value: 'cexiangdaohang',
                  label: this.$t('form.cxdh')
                }, {
                  value: 'dingbudaohang',
                  label: this.$t('form.dbdh')
                }]
              }]
            }, {
              value: 'zujian',
              label: this.$t('form.zj'),
              children: [{
                value: 'basic',
                label: 'Basic',
                children: [{
                  value: 'layout',
                  label: this.$t('form.bj')
                }, {
                  value: 'color',
                  label: this.$t('form.sc')
                }, {
                  value: 'typography',
                  label: this.$t('form.zt')
                }, {
                  value: 'icon',
                  label: this.$t('form.tb')
                }, {
                  value: 'button',
                  label: this.$t('form.an')
                }]
              }, {
                value: 'form',
                label: 'Form',
                children: [{
                  value: 'radio',
                  label: this.$t('form.dxk')
                }, {
                  value: 'checkbox',
                  label: this.$t('form.dxk')
                }, {
                  value: 'input',
                  label: this.$t('form.srk')
                }, {
                  value: 'input-number',
                  label: this.$t('form.jsq')
                }, {
                  value: 'select',
                  label: this.$t('form.xzq')
                }, {
                  value: 'cascader',
                  label: this.$t('form.jlxzq')
                }, {
                  value: 'switch',
                  label: this.$t('form.kg')
                }, {
                  value: 'slider',
                  label: this.$t('form.hk')
                }, {
                  value: 'time-picker',
                  label: this.$t('form.sjxzq')
                }, {
                  value: 'date-picker',
                  label: this.$t('form.rqxzq')
                }, {
                  value: 'datetime-picker',
                  label: this.$t('form.rqsjxzq')
                }, {
                  value: 'upload',
                  label: this.$t('form.sc')
                }, {
                  value: 'rate',
                  label: this.$t('form.pf')
                }, {
                  value: 'form',
                  label: this.$t('form.bd')
                }]
              }, {
                value: 'data',
                label: 'Data',
                children: [{
                  value: 'table',
                  label: this.$t('form.bg')
                }, {
                  value: 'tag',
                  label: this.$t('form.bq')
                }, {
                  value: 'progress',
                  label: this.$t('form.jdt')
                }, {
                  value: 'tree',
                  label: this.$t('form.sxkj')
                }, {
                  value: 'pagination',
                  label: this.$t('form.fy')
                }, {
                  value: 'badge',
                  label: this.$t('form.bj')
                }]
              }, {
                value: 'notice',
                label: 'Notice',
                children: [{
                  value: 'alert',
                  label: this.$t('form.jg')
                }, {
                  value: 'loading',
                  label: this.$t('form.jz')
                }, {
                  value: 'message',
                  label: this.$t('form.xxts')
                }, {
                  value: 'message-box',
                  label: this.$t('form.tk')
                }, {
                  value: 'notification',
                  label: this.$t('form.tz')
                }]
              }, {
                value: 'navigation',
                label: 'Navigation',
                children: [{
                  value: 'menu',
                  label: this.$t('form.dhcd')
                }, {
                  value: 'tabs',
                  label: this.$t('form.bqy')
                }, {
                  value: 'breadcrumb',
                  label: this.$t('form.mbx')
                }, {
                  value: 'dropdown',
                  label: this.$t('form.xlcd')
                }, {
                  value: 'steps',
                  label: this.$t('form.bzt')
                }]
              }, {
                value: 'others',
                label: 'Others',
                children: [{
                  value: 'dialog',
                  label: this.$t('form.dhk')
                }, {
                  value: 'tooltip',
                  label: this.$t('form.wzts')
                }, {
                  value: 'popover',
                  label: this.$t('form.tck')
                }, {
                  value: 'card',
                  label: this.$t('form.kp')
                }, {
                  value: 'carousel',
                  label: this.$t('form.zmd')
                }, {
                  value: 'collapse',
                  label: this.$t('form.zdmb')
                }]
              }]
            }, {
              value: 'ziyuan',
              label: this.$t('form.zy'),
              children: [{
                value: 'axure',
                label: 'Axure Components'
              }, {
                value: 'sketch',
                label: 'Sketch Templates'
              }, {
                value: 'jiaohu',
                label: this.$t('form.zjjhwd')
              }]
            }]
          },
          ruleForm2: {
            pass: '',
            checkPass: '',
            age: ''
          },
          rules: {
            selected: [
              {type: 'array', required: true, message: this.$t('form.qsrzdyzj'), trigger: 'change' }
            ],
            name: [
              { required: true, trigger: 'blur' },
              { min: 3, max: 5, message: this.$t('form.cdzdgzf'), trigger: 'blur' }
            ],
            region: [
              { required: true, message: this.$t('form.qxzhdqy'), trigger: 'change' }
            ],
            date1: [
              { type: 'date', required: true, message: this.$t('form.qxzrq'), trigger: 'change' }
            ],
            date2: [
              { type: 'date', required: true, message: this.$t('form.qxzsj'), trigger: 'change' }
            ],
            type: [
              { type: 'array', required: true, message: this.$t('form.qzsxzyghdxz'), trigger: 'change' }
            ],
            resource: [
              { required: true, message: this.$t('form.qxzhdzy'), trigger: 'change' }
            ],
            desc: [
              { required: true, message: this.$t('form.qtxhdxs'), trigger: 'blur' }
            ],
            cascader: [
              { type: 'array', required: true, message: this.$t('form.qtxjlzj'), trigger: 'change' }
            ]
          },
          rules2: {
            pass: [
              { validator: yufp.validator.number, trigger: 'change'}
            ],
            checkPass: [
              { validator: yufp.validator.number, trigger: 'blur' }
            ],
            age: [
              { required: true, message: this.$t('form.bt')},
              { min: 3, max: 5, message: this.$t('form.cdbxzj')},
              { validator: yufp.validator.checkAge, trigger: 'blur', message: this.$t('form.znwsz')}
            ]
          }
        };
      },
      mounted: function () {

      },
      methods: {
        submitForm: function (formName) {
          console.log(this.ruleForm.selected);
          this.$refs[formName].validate(function (valid) {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        showVal: function (val) {
          console.log(val);
        },
        resetForm: function (formName) {
          this.$refs[formName].resetFields();
          this.$refs.mySelect.clear();
          this.value = '';
        },
        showValFn: function (formName) {
          alert(this.ruleForm.selected);
        },
        handleChange: function (val) {
          alert(val);
        }
      }
    });

    window.vm = vm;
  };

  // 消息处理
  exports.onmessage = function (type, message) {

  };

  // page销毁时触发destroy方法
  exports.destroy = function (id, cite) {

  };
});
